<template>
  <div>
    <el-select ref="tableSelect" v-model="selectLable" :keydisabled="false" :placeholder="selplaceholder"
      popper-class="select-table" @visible-change="selectFocus" clearable @clear="tableClear" filterable remote
      :remote-method="filterTableData" :popper-append-to-body="popperappendtobody">
      <el-option :value="selectLable" :label="selectLable" style="padding:0;height:auto;width:100%;">
        <div class="table-content">
          <el-table ref="selectTable" :data="tableDataList" keyVisiable="false" highlight-current-row
            @row-click="selectTableRow" @current-change="tableRowSelect">
            <el-table-column v-for="item in tableColumnData" :key="item.id" :prop="item.data" :label="item.label"
              :width="item.width" :align="item.align" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "rm-selecttable",
  props: {
    showName: {
      // 下拉框显示字段名称
      type: String,
      default: "",
      require: true,
    },
    tableColumnData: {
      // 表格展示列
      type: Array,
      default: [],
      require: true,
    },
    ftableDataList: {
      // 下拉框数据
      type: Array,
      default: [],
      require: true,
    },
    filterColumn: {
      // 定义过滤数据字段
      type: Array,
      default: [],
      require: false,
    },
    selplaceholder: {
      // 文字提示
      type: String,
      default: "请选择",
      require: false,
    },
    currentLable: {
      // 当前选中下拉框显示文字
      type: String,
      default: "",
      require: true,
    },
    setCurrentFlag: {
      // 当前选中下拉框显示文字
      type: Boolean,
      default: true,
      require: false,
    },
    popperappendtobody: {
      // 是否将弹出框插入至 body 元素(在vxe-table中使用时最好将其设置成false,否则有可能会出现点击滚动条弹出框消失的问题)
      type: Boolean,
      default: true,
      require: false,
    }
  },
  data() {
    return {
      // tableColumnData: [
      //     {
      //         data: "ceshi",
      //         label: "测试",
      //         width: "60",
      //         align: "center"
      //     },
      //     {
      //         data: "ceshi1",
      //         label: "测试1",
      //         width: "80"
      //     }
      // ],
      // tableDataList: [
      //     {id: 1,"ceshi": 111,"ceshi1": 222},
      //     {id: 2,"ceshi": 555,"ceshi1": 666}
      // ],
      tableDataList: [],
      selectRow: {},
      selectLable: "",
      // selectId: "",
      // precrollTop: 0,
    };
  },
  watch: {
    currentLable: {
      handler: function (val, oldVal) {
        this.selectLable = val;
        if (!val) {
          this.selectRow = {};
          this.$refs.selectTable.setCurrentRow();
        } else { // 高亮行显示

        }
      },
      deep: true,
    },
    ftableDataList: {
      handler: function (val, oldVal) {
        this.dealTableDataList(val);
      },
      deep: true,
    },
  },
  mounted() {
    this.selectLable = this.currentLable;
    var data = XEUtils.clone(this.ftableDataList, true);
    this.dealTableDataList(data);
  },
  methods: {
    dealTableDataList(alltableDataList) {
      var tableDataList = XEUtils.clone(alltableDataList.slice(0, 50), true);
      var idnum = 1;
      tableDataList.forEach((element) => {
        element.id = idnum++;
      });
      this.$nextTick(() => {
        this.tableDataList = tableDataList;
        if (tableDataList.length > 0) this.$refs.selectTable.setCurrentRow(tableDataList[0]);
      });
    },
    filterTableData(e) {
      //console.log("startfilter",e)
      // console.log(this.ftableDataList)
      if (e) {
        var filterColumnLength = 0;
        filterColumnLength = this.filterColumn.length;
        if (filterColumnLength == 0) return false;
        var alltableDataList = [];
        this.ftableDataList.forEach((element) => {
          let hasflag = false;
          for (let i = 0; i < filterColumnLength; i++) {
            if (element[this.filterColumn[i]] && element[this.filterColumn[i]].toUpperCase().indexOf(e.toUpperCase()) > -1) {
              hasflag = true;
            }
          }
          if (hasflag) alltableDataList.push(element);
        });
        this.dealTableDataList(alltableDataList);
      } else {
        this.dealTableDataList(this.ftableDataList);
      }
    },
    tableClear() {
      // this.selectId = 0;
      this.selectRow = {};
      // this.selectLable = "";
      this.$refs.selectTable.setCurrentRow();
      // this.precrollTop = 0;
      this.$emit("change");
    },
    selectTableRow(row, column, event) {
      // console.log(row, column, event);
      if (!row) return false;
      this.$nextTick(() => {
        if (this.setCurrentFlag) {
          // this.selectId = row.id;
          // console.log(row[this.showName])
          this.selectRow = row;
          // this.selectLable = row[this.showName];
          this.$refs.selectTable.setCurrentRow(row);
          // this.precrollTop = document.getElementsByClassName("select-table")[0].children[0].firstChild.scrollTop;
        } else {
          // this.$refs.selectTable.clearCurrentRow();
          this.$refs.tableSelect.blur();
        }
        this.$emit("change", row);
      });
    },
    selectFocus(e) {
      // if (e) {
      //     // if (!this.selectLable) {
      //         setTimeout(() => {
      //             // console.log(document.getElementsByClassName("select-table")[0].children[0])
      //             document.getElementsByClassName("select-table")[0].children[0].firstChild.scrollTop = this.precrollTop;
      //             // console.log(this.$refs.selectTable)
      //         }, 100);
      //     // }
      // }
      var that = this;
      if (e) {
        setTimeout(() => {
          if (that.$refs.selectTable) {
            let bodyWrapper = that.$refs.selectTable.$el;
            if (!that.selectRow.id) {
              bodyWrapper.scrollTop = 0;
            } else {
              bodyWrapper.scrollTop = this.selectRow.id * 30;
            }
          }
        }, 100);
      }
    },
    tableRowSelect(e) {
      var that = this;
      if (e) {
        setTimeout(() => {
          if (that.$refs.selectTable) {
            let bodyWrapper = that.$refs.selectTable.$el;
            bodyWrapper.scrollTop = Math.floor(e.id / 7) * 210;
          }
        }, 100);
      }
    },
  },
};
</script>

<style scoped>
::v-deep.el-table__body tr.current-row>td {
  background-color: #c5d7eb;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}

.el-table {
  color: #131414;
}

.table-content {
  height: 245px;
}

::v-deep .table-content .el-table {
  height: 100%;
  overflow-y: auto;
}

::v-deep .table-content .el-table th {
  line-height: 23px !important;
}

::v-deep .el-table .cell {
  padding: 0 5px;
}</style>
